<template>
    <div class="sjplatformSelectForm">
        <el-form :inline="true">
            <el-form-item label="项目名称">
                <el-input v-model="scheduleData.queryCondition.projectName" placeholder="请输入名称..." />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="sjplatformtable">
        <el-table :data="scheduleData.tableData" v-loading="loading" empty-text="暂无数据" stripe border>
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ $index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="projectName" label="项目名称" class-name="left-align">
                <template #default="{ row }">
                    <el-tooltip class="item" effect="light" :content="row.projectName" placement="top">
                        <span>{{ row.projectName }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="managerName" label="项目经理" width="100" />
            <el-table-column prop="projectPassTime" label="立项通过时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.projectPassTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="projectPassTime" label="需求通过时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.requirementPassTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="addTime" label="创建时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.addTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度" width="140">
                <template #default="{ row }">
                    <span>{{ row.progress == null ? '0%' : row.progress + '%' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="140">
                <template #default="{ row }">
                    <div :class="getStatusStyle(row.status)"> {{
                        getStatusEnumChineseByValue(row.status, ProcessEnum.Schedule) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-tooltip content="查看项目详情" placement="bottom" effect="light">
                        <i class="detail-icon" @click="showDetail(row.projectId)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="row.status == null || row.status == StatusEnum.Creating" content="进度计划设置" placement="bottom"
                        effect="light">
                        <i class="schedule-icon" @click="setSchedule(row)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="row.status > StatusEnum.Creating" content="查看进度计划" placement="bottom"
                        effect="light">
                        <i class="approvedetail-icon" @click="showSchedule(row)"></i>
                    </el-tooltip>
                    <el-tooltip content="提交评审" v-if="row.status == StatusEnum.Creating" placement="bottom"
                        effect="light">
                        <i class="submit-icon" @click="submitForReview(row)"></i>
                    </el-tooltip>
                    <el-tooltip content="撤回评审" v-if="row.status == StatusEnum.SubmitApproval" placement="bottom"
                        effect="light">
                        <i class="revocation-icon" @click="withdrawReview(row)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="scheduleData.total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="newScheduleTableVisible" :title="formTitle" width="80%" draggable :destroy-on-close="true"
        :close-on-click-modal="false" class="fullscreen-dialog">
        <ScheduleForm />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="newReviewTableVisible" :title="formTitle" width="80%" draggable :destroy-on-close="true"
        :close-on-click-modal="false" class="fullscreen-dialog">
        <SchedulesReview :scheduleId="fId" />
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="newReviewTableVisible = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-drawer v-model="isShowDetail" direction="rtl" :before-close="handleDrawerClose">
        <template #header="{ titleId }">
            <h4 :id="titleId">项目详情</h4>
        </template>
        <ProjectDetail :projectId="projectId" />
        <template #footer>
            <el-row>
                <el-col :span="24" class="align-right-buttons">
                    <div>
                        <el-button type="primary" @click="isShowDetail = false">确定</el-button>
                    </div>
                </el-col>
            </el-row>
        </template>
    </el-drawer>
    <el-dialog v-model="newStartFlowVisible" :title="formTitle" width="50%" draggable :destroy-on-close="true">
        <FlowSelect :fid="fId" :fname="fName" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelSubmit">取消</el-button>
                <el-button type="primary" @click="confirmSubmitApprove">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ScheduleForm from "./ScheduleForm.vue";
import SchedulesReview from "../Common/SchedulesReview.vue";
import ProjectDetail from "../Common/ProjectDetail.vue";
import FlowSelect from "../../FlowManager/FlowSelect.vue";
import commonUtil from "../../../utils/common";
import { useProjectSchedule } from "../../../hooks/ProjectManager/Plan/useProjectSchedule";
import { useApproveTable } from '../../../hooks/ApproveManager/useApproveTable';
import { ProcessEnum, StatusEnum, getStatusEnumChineseByValue, getStatusStyle } from "../../../hooks/Common/useStatusEnum";

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let isShowDetail = ref(false);
let projectId = ref('');
let fId = ref('');//需求主记录ID
let fName = ref('');//需求主记录ID
let newScheduleTableVisible = ref(false);
let newReviewTableVisible = ref(false);
let newStartFlowVisible = ref(false);//启动流程窗口
let formTitle = ref('');

let { scheduleData, projectStore, formulateSchedule, getProjectSchedules, updateScheduleMainSpecificContent } = useProjectSchedule(currentPage, pageSize);
getProjectSchedules();

let { createData, deleteDataByFid } = useApproveTable(currentPage, pageSize);

//查看详情
function showDetail(value) {
    projectId.value = value;
    isShowDetail.value = true;
}

//设置进度计划
function setSchedule(value) {
    projectStore.projectModel.id =  value.projectId;
    projectStore.projectModel.projectName = value.projectName;
    projectStore.resetScheduleModel();
    projectStore.scheduleModel.projectId = value.projectId;
    formTitle.value = value.projectName + " - 进度计划编制";
    newScheduleTableVisible.value = true;
}

//查看进度计划
function showSchedule(schedule) {
    formTitle.value = '查看进度计划';
    fId.value = schedule.id;
    newReviewTableVisible.value = true;
}

//提交评审
function submitForReview(schedule) {
    formTitle.value = '提交评审';
    fId.value = schedule.id;
    fName.value = schedule.projectName + '进度计划';
    projectStore.scheduleModel.id = schedule.id;
    newStartFlowVisible.value = true;
}
//撤回审批
async function withdrawReview(schedule) {
    commonUtil.Methods.confirm("确定撤回评审吗？", async () => {
        projectStore.scheduleModel.id = schedule.id;
        projectStore.scheduleModel.status = StatusEnum.Creating;
        projectStore.scheduleModel.updateProperties.push('Status');
        if (await deleteDataByFid(schedule.id) && await updateScheduleMainSpecificContent()) {
            commonUtil.Methods.ShowMessage("success", "撤回评审成功！");
            searchData();
        }
    })
}
//取消评审
function cancelSubmit() {
    newStartFlowVisible.value = false;
}
//确定提交
async function confirmSubmitApprove() {
    createData().then(() => {
        projectStore.scheduleModel.status = StatusEnum.SubmitApproval;
        if (!projectStore.scheduleModel.updateProperties) {
            projectStore.scheduleModel.updateProperties = [];
        }
        projectStore.scheduleModel.updateProperties.push('Status');
        updateScheduleMainSpecificContent().then(() => {
            commonUtil.Methods.ShowMessage("success", "提交审批成功！");
            newStartFlowVisible.value = false;
            searchData();
        })
    })
}

//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    searchData(); // 根据当前页获取数据
}

//取消
function cancel() {
    newScheduleTableVisible.value = !newScheduleTableVisible.value;
}

//确定
function confirm() {
    formulateSchedule().then(() => {
        newScheduleTableVisible.value = !newScheduleTableVisible.value;
    })
}
//查询按钮
function searchData() {
    loading.value = true;
    currentPage.value = 1;
    getProjectSchedules();
    loading.value = false;
}

function handleDrawerClose() {
    projectId.value = '';
    isShowDetail.value = false;
}
</script>